<template>
  <div class="w-full h-full">
    <div class="h-[108px] w-full border-b border-solid border-[var(--grid)] flex flex-col s2k:h-[144px] s4k:h-[216px]">
      <div class="flex-[1] h-full flex items-end">
        <span class="text-[2rem] text-[var(--theme-font-color)] font-[600] font-Inter ml-[24px] s2k:ml-[32px] s4k:ml-[48px]">Visual Analysis</span>
      </div>
      <div class="flex-[1] h-full text-[1.3rem] text-[var(--theme-font-desc-color)] flex flex-row justify-start items-center">
        <div class="ml-[24px] s2k:ml-[32px] s4k:ml-[48px] h-full flex items-center cursor-pointer"
         :style="{
            borderBottom: store.VAindex === 1 ? 'solid #3F83F8 1px' : '',
            color: store.VAindex === 1 ? '#3F83F8' : '',
          }" @click="goChild(1, '/Vas/vastore')">VA Store</div>
        <div class="ml-[24px] s2k:ml-[32px] s4k:ml-[48px] h-full flex items-center cursor-pointer"
         :style="{
            borderBottom: store.VAindex === 2 ? 'solid #3F83F8 1px' : '',
            color: store.VAindex === 2 ? '#3F83F8' : '',
          }" @click="goChild(2, '/Vas/myva')">My VA</div>
        <div class="ml-[32px] s2k:ml-[42.6px] s4k:ml-[64px] h-full flex items-center cursor-pointer"
             :style="{
            borderBottom: store.VAindex === 3 ? 'solid #3F83F8 1px' : '',
            color: store.VAindex === 3 ? '#3F83F8' : '',
          }" @click="goChild(3, '/Vas/vasetup')">VA Setup</div>
      </div>
    </div>
    <div class="h-[calc(100%_-_108px)] s2k:h-[calc(100%_-_144px)] s4k:h-[calc(100%_-_216px)]">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
import {useRouter} from "vue-router";
import {ref, onMounted,watch} from "vue";
import settingStore from '@/store/modules/setting'
const store = settingStore()

const router = useRouter()
// const typeIndex = ref(store.VAindex || 1)
const goChild = (num, path) => {
  store.setVAindex(num)
  router.push(path)
}
</script>

<style scoped lang="scss">

</style>